<template>
	<view style="background-color: #FFF;">
		<view style="height: 80rpx;"></view>
		<view class="header">
			<view class="text1">
				欢迎您!爱心人士
			</view>
			<view class="text2">愿你有个美好的一天</view>
		</view>
		<view style="height: 440rpx;width: 88%;margin: 0 auto;">
			<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" 
				:circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.broadcastImage" mode="aspectFill" style="border-radius: 40rpx;height: 100%;">
					</image>
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<view class="dataView" style="" v-if="billboardList.length > 0">
			<view style="height: 220rpx;width: 100%;">
				<swiper style="height: 100%;" :vertical="true" :autoplay="true"
				interval="5000" duration="500" circular="true">
					<swiper-item v-for="(item,index) in billboardList" :key="index">
						<image :src="item.broadcastImage" mode="aspectFill" style="border-radius: 40rpx;width: 100%;height: 100%;">
						</image>
						<!-- <view class="rank">
							<view class="title">中国社会福利金会·免费午餐数据概括</view>
							<view class="rankList">
								<view class="list">
									<view class="listBtn">{{item.tag1}}</view>
									<view class="listText">
										<view class="listNum">{{item.tag1Value}}</view>
										<view class="">万</view>
									</view>
								</view>
								<view class="list">
									<view class="listBtn">{{item.tag2}}</view>
									<view class="listText">
										<view class="listNum">{{item.tag2Value}}</view>
										<view class="">万</view>
									</view>
								</view>
								<view class="list">
									<view class="listBtn">{{item.tag3}}</view>
									<view class="listText">
										<view class="listNum">{{item.tag3Value}}</view>
										<view class="">万</view>
									</view>
								</view>
								<view class="list1">
									<view class="listBtn">{{item.tag4}}</view>
									<view class="listText">
										<view class="listNum">{{item.tag4Value}}</view>
										<view class="">万</view>
									</view>
								</view>
							</view>
						</view> -->
					</swiper-item>
				</swiper>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: ['baseInfo'],
		data() {
			return {
				swiperList: [],
				dotStyle: true,
				billboardList: [],
				// billboardList: [{
				// 	id: 1,
				// 	title: '全国榜',
				// 	time: '截至2022年5月底',
				// 	tag1: '总募捐',
				// 	tag1Value: '898.9',
				// 	tag2: '开餐学校',
				// 	tag2Value: '1688',
				// 	tag3: '惠及人数',
				// 	tag3Value: '66.69',
				// 	tag4: '全国自治区',
				// 	tag4Value: '26'
				// }, {
				// 	id: 1,
				// 	title: '全',
				// 	time: '截至2022年5月底',
				// 	tag1: 'jkjjk',
				// 	tag1Value: '898.9',
				// 	tag2: '开餐学校',
				// 	tag2Value: '1688',
				// 	tag3: '惠及人数',
				// 	tag3Value: '66.69',
				// 	tag4: '全国自治区',
				// 	tag4Value: '26'
				// }],
			}
		},
		mounted() {
		},
		onReady() {

		},
		methods: {
			formatNumber(num) {
				if (num > 10100) {
					return (num / 10000).toFixed(2) + "万";
				}
				return num;
			}
		},
		watch: {
			baseInfo(val) {
				this.swiperList = val.first_floor
				this.billboardList = val.second_floor
			}
		}
	}
</script>

<style scoped>
	.screen-swiper {
		min-height: 440rpx;
	}

	.data-swiper {
		min-height: 300rpx;
	}

	.bg-gradual-orange1 {
		background-image: linear-gradient(45deg, #FD505C, #FF707A);
		color: #ffffff;
	}

	.bg-gradual-orange2 {
		background-image: linear-gradient(45deg, #FF707A, #FD505C);
		color: #ffffff;
	}
	.dataView{
		/* height: 300rpx; */
		/* background: url('/static/rankbg.png') center no-repeat; */
		background-size: contain;
		margin: 0 auto;width: 88%;
		padding: 40rpx 0 20rpx;
		/* border: 2rpx white solid; */
	}
	
	/*
	 免费午餐数据汇总
	 */
	.rank{
		width: 100%;
		height: 220rpx;
		margin: 0 ;
		
	}
	.rank .title{
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #FFFFFF;
		padding-left: 70rpx;
		padding-top: 2rpx;
	}
	.rankList{
		display: flex;
		width: 100%;
		color: #FFFFFF;
		text-align: center;
		margin: 28rpx auto;
		justify-content: space-around;
	}
	.list{
		width: 20%;
	}
	.list1{
		width: 26%;
	}
	.listBtn{
		font-size: 26rpx;
	    color: #000000;
		padding: 10rpx;
		background-color: #DDE0FE;
		border-radius: 30px;
	}
	.listText{
		display: flex;
		text-align: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	.listNum{
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 700;
		
	}
</style>
